$(function () {

    function myChart3_1_1() {

        var myChart = echarts.init(document.getElementById('chart3-1-1'));
        option = {
           
            tooltip: {
                trigger: 'item',
                formatter: function (parms) {
                    var str = parms.seriesName + "</br>" +
                        "可用总车位:500"+"</br>"+parms.marker+
                        "数量：" + parms.data.value + "</br>" +parms.marker+
                        "占比：" + parms.percent + "%";
                    return str;
                }
            },

            series: [{
                name: '智能停车场1号',
                type: 'pie',
                clockWise: true,
                radius: ['60%', '70%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: 'rgba(23,178,205,0.23)',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                }, {
                    value: 100,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#12BEDC',
                                    fontSize: 16,
                                    padding:[5,0]
                                }
                            },
                            formatter: function (parms) {
                                return '{a|'+parms.value + '}\n'  + '剩余车位'
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                color: '#12BEDC',
                                fontSize: 16
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#17B2CD'
                        }
                    }
                }]
            }]
        }
        myChart.setOption(option);
    }
    function myChart3_1_2() {

        var myChart = echarts.init(document.getElementById('chart3-1-2'));
        option = {
           
            tooltip: {
                trigger: 'item',
                formatter: function (parms) {
                    var str = parms.seriesName + "</br>" +
                        "可用总车位:500"+"</br>"+parms.marker+
                        "数量：" + parms.data.value + "</br>" +parms.marker+
                        "占比：" + parms.percent + "%";
                    return str;
                }
            },
            series: [{
                name: '智能停车场2号',
                type: 'pie',
                clockWise: true,
                radius: ['60%', '70%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'rgba(1,218,149,0.23)',

                        }
                    }
                }, {
                    value: 156,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#01DA95',
                                    fontSize: 16,
                                    padding:[5,0]
                                }
                            },
                            formatter: function (parms) {
                                return '{a|'+parms.value + '}\n' + '剩余车位'
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                color: '#01DA95',
                                fontSize: 16
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#01DA95'
                        },
                    }
                }]
            }]
        }
        myChart.setOption(option);
    }
    function myChart3_2() {

        var myChart = echarts.init(document.getElementById('chart3-2'));
        var data = [80, 70, 60, 50, 40, 30, 25, 20, 15, 10]
        var titlename = ['河南', '上海', '西安', '河北', '浙江', '天津', '成都', '重庆', '山东', '北京'];
        var valdata = [500, 460, 421, 398, 360, 321, 289, 246, 209, 169]

        option = {
            grid: {
                left: '13%',
                right: '13%',
                top: '10%',
                bottom: '10%',
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#49E2EB',
                    formatter: function (value) {
                        return [
                            value
                        ].join('\n')
                    },
                },


            }, {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#FFAE47',
                    },
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

            }],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: data,
                barWidth: 12,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: "#2782CD" // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "#07E2CD" // 100% 处的颜色
                        }], false)
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        }
                    }
                },
            }, {
                name: '框',
                type: 'bar',
                yAxisIndex: 1,
                barGap: '-100%',
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                barWidth: 12,
                itemStyle: {
                    normal: {
                        color: 'none',
                        borderColor: 'rgba(73,226,235,0.2)',
                        borderWidth: 1,
                        barBorderRadius: 15,
                    }
                }
            },]
        };
        myChart.setOption(option);
    }
    function myChart3_3() {

        var myChart = echarts.init(document.getElementById('chart3-3'));
        var scale = 1;
        var echartData = [{
            value: 2,
            name: '其它求助'
        }, {
            value: 1,
            name: '财务求助'
        }, {
            value: 2,
            name: '寻人求助'
        }, {
            value: 2,
            name: '健康求助'
        }, {
            value: 1,
            name: '安全求助'
        }];
        var total = 0;
        for (let i = 0; i < echartData.length; i++) {
            total += echartData[i].value
        }
        var rich = {
            white: {
                color: "#fff",
                align: 'center',
                fontSize: 12 * scale,
                padding: [5, 0],
                fontWeight: 700

            },
            blue: {
                color: '#657CA8',
                fontSize: 12 * scale,
                align: 'center',
                padding: [5, 0],
            },
            hr: {
                borderColor: 'rgba(255,255,255,.1)',
                width: '100%',
                borderWidth: 1,
                height: 0,
            }
        };
        var colorArr = ['#01DB99', '#FFAD45', '#238FCD', '#08DECD', '#F35777'];
        option = {
            title: {
                subtext: total,
                text: '警情总数',
                x: 'center',
                y: '40%',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#fff'
                },
                subtextStyle: {
                    color: '#FFB954',
                    fontSize: 20,
                    fontWeight: 700
                },
            },
            series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['52%', '62%'],
                hoverAnimation: false,
                color: colorArr,
                label: {
                    normal: {
                        formatter: function (params) {

                            return '{white|' + params.value + '}' + '\n{hr|}\n' + '{blue|' + params.name + '}'
                        },
                        rich: rich,
                    },
                },
                labelLine: {
                    normal: {
                        length: 30 * scale,
                        length2: 0,
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                },
                data: echartData
            }]
        };
        myChart.setOption(option);
    }

    myChart3_1_1();
    myChart3_1_2();
    myChart3_2();
    myChart3_3();

    // 显示下拉菜单
    $('.select-box a').click(function () {
        $(this).siblings('.dropDown').slideToggle()
    })
    // 下拉菜单点击事件
    $('.dropDown li').click(function () {
        let selected = $(this).text()
        $(this).parent().siblings().text(selected)
        $('.dropDown').slideUp()
    })

    



})